<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .img1{
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        h3 a{
            text-decoration: none;
            color: black;
        }

    </style>
</head>
<body>
<h3>
    <a href="">商品管理</a>
</h3>

<div id="commodityapp">
    <label>商品名称:</label>
    <el-input v-model="search" placeholder="请输入商品名称" style="width: 200px"></el-input>
    <label>商品种类:</label>
    <el-select v-model="value" placeholder="请选择">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" @click="inquire">查询</el-button><br>

    <el-button type="text" @click="dialogFormVisible = true;clearCommodity()">添加商品</el-button>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" @close="clearCommodity">
        <el-form :model="commodity">
            <el-form-item label="商品名称">
                <el-input v-model="commodity.pname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品编号">
                <el-input v-model="commodity.pnumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产地">
                <el-input v-model="commodity.plocal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="材质">
                <el-input v-model="commodity.pmaterial" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="品牌">
                <el-input v-model="commodity.pbrand" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品质量">
                <el-input v-model="commodity.pquality" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  label="分类(企业)">
                <el-select v-model="commodity.companyId" placeholder="请选择">
                    <el-option
                            v-for="item in companys"
                            :label="item.companyType"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item  label="商品种类">
                <el-select v-model="commodity.penterprise" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="保质期">
                <el-input v-model="commodity.pshelflife" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="商品全部信息" :visible.sync="dialogTableVisible">
        <el-descriptions class="margin-top" v-model="commodityaa" :column="3" >
            <el-descriptions-item label="商品名称">{{commodityaa.id}}</el-descriptions-item><br>
            <el-descriptions-item label="商品图片">
                <img :src="commodityaa.pimg" class="img1">
            </el-descriptions-item><br>
            <el-descriptions-item label="商品编号">{{commodityaa.pnumber}}</el-descriptions-item><br>
            <el-descriptions-item label="商品分类(企业)">{{commodityaa.company.companyType}}</el-descriptions-item><br>
            <el-descriptions-item label="商品种类">{{commodityaa.penterprise}}</el-descriptions-item><br>
            <el-descriptions-item label="产地">{{commodityaa.plocal}}</el-descriptions-item><br>
            <el-descriptions-item label="材质">{{commodityaa.pmaterial}}</el-descriptions-item><br>
            <el-descriptions-item label="品牌">{{commodityaa.pbrand}}</el-descriptions-item><br>
            <el-descriptions-item label="成本价格">{{commodityaa.pprice}}</el-descriptions-item><br>
            <el-descriptions-item label="商品质量">{{commodityaa.pquality}}</el-descriptions-item><br>
        </el-descriptions>
    </el-dialog>
    <el-table
            :data="commoditys"
            style="width: 100%">
        <el-table-column
                label="编号"
                width="50px">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="商品名称">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="商品图片">
            <template slot-scope="scope">
                <a @click="clickImg(scope.row)">
                    <img class="img1" :src="scope.row.pimg">
                </a>
            </template>
        </el-table-column>
        <el-table-column
                label="商品种类">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.penterprise }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="价格">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.pprice }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="类别">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.company.companyType }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="添加时间">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.paddtime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="审核状态">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.astatus }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="商品状态"
                width="150px">
            <template slot-scope="scope">
                <el-switch
                        v-model="scope.row.pstatus"
                        active-text="上架"
                        active-color="#13ce66"
                        @change="commodityState(scope.row.id,scope.row.pstatus)"
                        inactive-text="下架" style="font-size: 12px">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row);">编辑</el-button>
                <el-button
                        size="mini"
                        style="background-color: #409EFF;color: #000000"
                        @click="clickImg(scope.row)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="current"

            @current-change="loadCommodity">
    </el-pagination>
</div>
<script>
    new Vue({
        el:"#commodityapp",
        data(){
            return{
                commoditys:[],
                current:0,
                total:0,
                pageSize:5,
               /* site:{
                    id:"",name:"",address:"",person:"",telephone:"",pid:""
                },
                index:0,*/
                commodity:{company:{companyType:""},astatus:"",},
                dialogFormVisible:false,
                pstatus:{},
                search:"",
                options: [{
                    value: '',
                    label: '-------'
                },{
                    value: '积分商品',
                    label: '积分商品'
                },{
                    value: '普通商品',
                    label: '普通商品'
                }],
                value: '',
                dialogTableVisible:false,
                commodityaa:{company:{companyType:""}},
                companys:{id:0},
            }
        },
        methods:{
            loadCommodity(current){
                axios.get("/commoditys/"+current+"/"+this.pageSize+"?pName="+this.search+"&pEnterprise="+this.value)
                    .then(res =>{
                        this.commoditys=res.data.data;
                        this.current=res.data.current;
                        this.total=res.data.count;
                        console.log(this.commoditys);
                        /*for (let i = 0; i < this.commoditys.length; i++) {
                            console.log(this.commoditys.company);
                        }*/
                    })
            },
            // 更新用户状态
            commodityState(id,state){
                console.log(id);
                console.log(state);
                axios.put("/commodity/" + id+"/"+state)
                    .then(res => {
                        if(res.data == "ok"){
                            this.$message({
                                type: "success",
                                message: "上架成功"
                            })
                        }else{
                            this.$message({
                                type: "success",
                                message: "下架成功"
                            })
                        }
                    })
            },

            inquire(){
                console.log(this.search);
                console.log(this.value);
                axios.get("/commoditys/"+this.current+"/"+this.pageSize+"?pName="+this.search+"&pEnterprise="+this.value)
                    .then(res =>{
                        this.commoditys=res.data.data;
                        this.current=res.data.current;
                        this.total=res.data.count;
                    })
            },
            clickImg(row){
               /* console.log(row.company.companyType);*/
                this.dialogTableVisible=true;
                this.commodityaa=row;
            },

            save(){
                console.log(this.commodity);

                    axios.post("/commodity",this.commodity)
                        .then(res =>{
                            if(res.data=="ok"){
                                this.$message({
                                    message:"成功",
                                    type:'success'
                                });
                                this.clearCommodity();
                                this.dialogFormVisible=false;
                                this.loadCommodity(this.current);
                            }

                        })


            },

            handleEdit(index, row) {
                this.commodity = JSON.parse(JSON.stringify(row));
                this.dialogFormVisible=true;
            },

            clearCommodity(){
                this.commodity={company:{companyType:""}};
            },
            loadCompany(){
                axios.get("/companys")
                    .then(res =>{
                        this.companys=res.data;
                        // console.log(this.companys)
                    })
            },
        },

        mounted(){
            this.loadCommodity(1);
            this.loadCompany();
        }
    })
</script>
</body>
</html>
